<template>
  <view class="page-content">
    <f-navbar title="收运订单" :navbarType="1">
      <view class="margin-right-xs" @click="goLink(`./add`)" slot="right" v-if="checkPermi(['receiveOrder:page:add'])">
        <u-icon name="plus" size="30rpx" bold color="#138E57"></u-icon>
      </view>
    </f-navbar>
    <view style="display: flex; justify-content: center; background-color: #fff">
      <u-tabs :list="list2" lineWidth="50" lineColor="#138E57" @change="tabChange" :current="selectTabs"></u-tabs>
    </view>


    <view class="search-block flex align-center">
      <view class="flex-sub search-input flex align-center" v-if="showSearch">
        <u-input border="none" v-model="listParams.orderCode" maxlength="20" fontSize="24rpx" placeholder="搜索"
          placeholderStyle="font-size: 24rpx;color: #CCCCCC;" confirmType="search" @confirm="searchList" :clearable="true"
          @clear="searchClear">
          <template slot="prefix">
            <u-icon name="search" color="#CCCCCC" size="40rpx"></u-icon>
          </template>
        </u-input>
      </view>
      <view class="flex-sub search-input flex align-center justify-center" @click="switchSearch(true)" v-else>
        <u-icon name="search" color="#CCCCCC" size="40rpx"></u-icon>
        <text class="margin-left-xs">搜索</text>
      </view>
      <template v-if="checkPermi(['receiveOrder:page:dispatch'])">
        <view class="batch-btn"  v-if="listParams.orderStatus == '0'" @click="batchClick()">
          批量派单
        </view>
      </template>
      <image class="screen-icon" src="@/static/images/common/screen_icon.png" @click="showScreenModal"></image>
    </view>
    <!-- <view class=""  @click="goLink(`./add`)">
    	新增
    </view> -->
    <view class="page-content-main">
      <scrollList :list="list" :loadComplete="loadComplete" @pullUpLoad="pullUpLoad" ref="scrollList">
        <view class="order-list">
          <u-checkbox-group v-model="selectOrder" placement="column" @change="handleSelectionChange">
            <view class="item" v-for="item of list" :key="item.id">
              <template v-if="checkPermi(['receiveOrder:page:dispatch'])">
                <u-checkbox activeColor="green" :name="item.id" v-if="listParams.orderStatus == '0'"  ></u-checkbox>
              </template>
              <view class="item-info" @click="goLink(`./info?id=${item.id}`)">
                <view class="item-title flex-ac flex-jb l-border-bottom">
                  <view>订单号：{{ item.orderCode }}</view>
                  <view>{{ orderStatusOptions[item.orderStatus].dictLabel }}</view>
                </view>

                <view class="form l-border-bottom">
                  <view class="form-type flex-jb">
                    <view>{{ item.emissionUnitName }}</view>
                    <!-- <view :class="[item.type == 1 ? 'title-tip2' : 'title-tip1']"
									  >收运</view
									> -->
                  </view>
                  <view class="form-item">
                    <view>联系人：</view>
                    <view>{{ item.contact }}</view>
                  </view>
                  <view class="form-item">
                    <view>联系人电话：</view>
                    <view>{{ item.contactPhone }}</view>
                  </view>
                  <view class="form-item">
                    <view>收运油品：</view>
                    <view>{{ item.oilName ? item.oilName : "--" }}
                    </view>
                  </view>
                  <view class="form-item" v-if="item.recycleBinName">
                    <view>中转站：</view>
                    <view>{{ item.recycleBinName ? item.recycleBinName : "--" }}
                    </view>
                  </view>
                  <view class="form-item">
                    <view>创建时间：</view>
                    <view>{{ item.createTime ? item.createTime : "--" }}
                    </view>
                  </view>
                </view>
                <view class="flex-je">
                  <template v-if="item.orderStatus == 0">
                    <view v-if="checkPermi(['receiveOrder:page:dispatch'])" class="button-light"
                      @click.stop="batchClick(item)"> 派单
                    </view>
                  </template>
                  <template v-if="checkPermi(['receiveOrder:page:cancel'])">
                    <view v-if="item.orderStatus == 0" class="button-deep" @click.stop="handleCancel(item.id)"> 取消 </view>
                  </template>
                  <!-- <template v-if="item.orderStatus > 0">
									<view class="button-deep" @click.stop=""> 车辆信息 </view>
								</template> -->
                  <template v-if="checkPermi(['receiveOrder:page:again'])">
                    <view v-if="item.orderStatus == 2" class="button-deep" @click.stop="goLink(`./add?id=${item.id}`)"> 再来一单 </view>
                  </template>
                </view>
              </view>
            </view>
          </u-checkbox-group>
        </view>
      </scrollList>
    </view>

    <screenModal :screenType="2" ref="screenModal" @setScreenForm="setScreenForm"
      :orderStatusOptions="orderStatusOptions" :oilOptions="oilOptions" :categoryOptions="categoryOptions" :ransferOptions="ransferOptions"></screenModal>
  </view>
</template>
<script>
import {
  getReceiptShipmentRecordsList,
  cancelApplication,
  receiptShipmentRecords,
  
  getOilList,
  category_allList,
  listAllTransfer_station
} from "@/api/collection.js";
import screenModal from "@/components/pageLayout/screenModal/collectionModal.vue";
export default {
  components: {
    screenModal,
  },
  data() {
    return {
      list2: [{
        name: "全部",
        value: "",
      },
      {
        name: "待派单",
        value: 0,
      },
      {
        name: "待收运",
        value: 1,
      },
      {
        name: "收运中",
        value: 4,
      },
      {
        name: "已完成",
        value: 2,
      },
      {
        name: "已取消",
        value: 3,
      },
      ],
      showSearch: false,
      listParams: {
        pageNum: 1,
        pageSize: 10,
        orderCode: null,
        orderStatus: null,
      },
      list: [],
      loadComplete: true,
      optionItem: {},
      orderStatusOptions: [],
      selectTabs: 0,

      selectOrder: [],
	  
	  oilOptions:[],
	  categoryOptions:[],
	  ransferOptions:[],
    };
  },
  // taskId
  onLoad(option) {
    if (option.taskId) {
      this.listParams.taskId = option.taskId
      this.getList()
    }
    if (option.orderStatus) {
      if (option.orderStatus == '0') {
        this.selectTabs = 1
      } else if (option.orderStatus == '1') {
        this.selectTabs = 2
      }
      this.listParams.orderStatus = option.orderStatus
      this.searchList()
    }else{
		this.selectTabs = '';
		this.listParams.orderStatus = '';
		this.listParams.orderCode = '';
	}
  },
  onShow() {
    uni.hideTabBar();
    this.switchSearch(false);
	
    this.listParams.pageNum = 1;
	this.list = []
    this.getList();
    this.getData();
	
	this.getOilList()
	this.getcategoryist()
	this.listAllTransfer_station()
  },
  methods: {
	getOilList(){
		getOilList().then(res => {
			console.log('所有油品',res);
			this.oilOptions = res.data
		})
	},
	getcategoryist(){
		category_allList().then(res => {
			console.log('所有种类',res);
			this.categoryOptions = res.data
		})
	},
	listAllTransfer_station(){
		listAllTransfer_station().then(res => {
			console.log('所有中转站',res);
			this.ransferOptions = res.data
		})
	},
    tabChange(val) {
      console.log(val);
      this.listParams.orderStatus = val.value;
      this.searchList()
    },
    switchSearch(value) {
      this.listParams.pageNum = 1
      this.showSearch = value;
    },
    searchList() {
      this.listParams.pageNum = 1
      this.getList()
    },
    searchClear() {
      this.listParams.orderCode = ''
      this.listParams.pageNum = 1
      this.getList()
    },
    async getData() {
      this.orderStatusOptions = await this.getDictionaryData("order_status");
    },
    getList() {
      getReceiptShipmentRecordsList(this.listParams).then((res) => {
        this.$refs.scrollList.pullUpDone(!1);
        if (this.listParams.pageNum == 1) {
          this.list = res.data.records;
          this.loadComplete = !0;
        } else {
          if (this.list.length == res.data.total) {
            this.$refs.scrollList.pullUpDone(!0);
          } else {
            this.list = [...this.list, ...res.data.records];
          }
        }
      });
    },
    pullUpLoad() {
      this.listParams.pageNum++;
      this.getList();
    },
    showScreenModal() {
      this.$refs.screenModal.showModal();
    },
    setScreenForm(form) {
		console.log('筛选条件',form);
      this.listParams = {
        ...this.listParams,
        ...form,
      };
	  this.list = []
      this.listParams.pageNum = 1;
      this.getList();
    },
    // 取消按钮操作
    handleCancel(id) {
      cancelApplication(id).then(() => {
        this.getList();
        uni.$u.toast("已取消");
      })
    },

    handleSelectionChange(n) {
      console.log('change', n);
	  this.selectOrder = n;
    },
	batchClick(row){
		
		let arr = [];
		// 如果是批量派单
		if (!row) {
			if(!this.selectOrder.length){
				uni.$u.toast("请选择订单");
				return
			}
			arr = this.list.filter( item => {
			    return this.selectOrder.find( prop => {
			        return prop == item.id
			    })
			})
			console.log(arr);
			// this.goLink(`./dispatch?id=${item.id}&orderCode=${item.orderCode}`)
			this.goLink(`./dispatch?select=${JSON.stringify(arr)}`)
		} else {
			arr = [row]
			// this.goLink(`./dispatch?id=${item.id}&orderCode=${item.orderCode}`)
			this.goLink(`./dispatch?select=${JSON.stringify(arr)}`)
		}
		
		
	}

  },
};
</script>
<style lang="scss" scoped>
.page-content {
	width: 100vw;
	overflow-x: hidden;
  height: 100vh;
  display: flex;
  flex-direction: column;

  .order-list {
    padding: 0 30rpx;

    .item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 30px;
    }
  }

  .item-info {
    flex: 1;
    padding: 20rpx 30rpx 30rpx 30rpx;
    background: #fff;
    border-radius: 12rpx;
	
    .button-light,
    .button-deep {
      border-radius: 200rpx;
      padding: 16rpx 0;
      margin: 20rpx 0 0 20rpx;
      width: 171rpx;
      text-align: center;
    }

    .button-light {
      background: #f7f7f7;
      border: 2rpx solid #138e57;
      color: #138e57;
    }

    .button-deep {
      background: linear-gradient(83deg, #48b453 0%, #2c9f79 100%);
      color: #ffffff;
    }

    .item-title {
      padding-bottom: 20rpx;

      view:nth-child(1) {
        font-size: 30rpx;
        color: #000000;
      }

      view:nth-child(2) {
        font-size: 28rpx;
      }
    }

    .form {
      padding: 30rpx 0;

      .title-tip1 {
        font-size: 24rpx;
        color: #ffbc1a;
        width: 40px;
        height: 17px;
        background: rgba(255, 186, 26, 0.2);
        padding: 0 16rpx;
        border-radius: 11px;
      }

      .title-tip2 {
        font-size: 24rpx;
        color: #138e57;
        width: 40px;
        height: 17px;
        background: rgba(19, 142, 87, 0.2);
        padding: 0 16rpx;
        border-radius: 11px;
      }

      .form-type {
        font-size: 32rpx;
        color: #000000;
      }

      .form-item {
        display: flex;
        font-size: 30rpx;
        padding-top: 16rpx;

        view:nth-child(2) {
          color: #000;
        }
      }
    }
  }

  .search-block {
    border-top: 1rpx solid #eeeeee;
    padding: 32rpx;
    background: #f7f7f7;

    .search-input {
      height: 58rpx;
      background: #ffffff;
      border-radius: 50rpx;
      font-size: 28rpx;
      color: #cccccc;
      padding: 0 20rpx;
    }

    .screen-icon {
      width: 50rpx;
      height: 50rpx;
      margin-left: 24rpx;
    }
	.batch-btn{
		margin-left: 24rpx;
		color: #138e57;
	}
  }

  &-main {
    position: relative;
    flex: 1;
    overflow: hidden;

    .list-block {
      padding: 0 32rpx;
    }
  }
}
</style>